<template>
  <div style="width: 100%">
    <div v-if="targetArr.length>0" class="mis-meeting-transfer">
      <el-row class="mis-row">
          <el-descriptions
          class="margin-top"
          :column="1"
          border
          :labelStyle="LS"
          v-for="(item,index) in targetArr"
          :key="index"
        >
          <el-descriptions-item label-class-name="des-label">
            <template slot="label">
              <span>{{item.ctName}}</span>
            </template>
            <span style="float:right;color:red;marginRight:20px;cursor:pointer">
              <i class="el-icon-delete"
              style="marginRight:20px;color:#E6A23C;"
              @click="()=>{handleDel(item)}" v-if="!disabled"></i>
            </span>
          </el-descriptions-item>
        </el-descriptions>
      </el-row>
    </div>
    <div class="mis-input" v-else>
      <el-input readonly/>
    </div>

    <el-button
      :disabled="disabled"
      class="mis-button"
      icon="el-icon-more"
      @click="()=>{
        handleClick()
      }"
    ></el-button>

    <el-dialog
      :visible.sync="openMeetingTransfer"
      v-if="openMeetingTransfer"
      class="mis-meeting-transfer-dialog"
      :title="dialogTitle"
      :width="'80%'"
      @close="cancel()"
      append-to-body
    >
      <el-row type="flex" :gutter="12">
        <el-col :span="9" class="dialog-col">
          <div class="dialog-col-div">
            <divHeader :setText="'指标库'" class="block-header"></divHeader>
            <div class="tree-ul-container">
              <!-- <ul class="tree-ul" style="padding-inline-start: 5px; margin-block-start:0px;">
                <li
                  v-for="(item) in joinList"
                  v-bind:key="item.ctId"
                  class="tree-li"
                  style="list-style-type:none;"
                >
                  <input type="checkbox" :value="item.ctId" v-model="checkJoinArr" />
                  {{item.ctName}}
                </li>
              </ul> -->
              <el-form :model="queryParams" :inline="true" label-width="100px">
                <el-form-item label="指标名称">
                  <el-input v-model="queryParams.ctName" placeholder="指标名称"/>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
                </el-form-item>
              </el-form>
              <el-table
                ref="multipleTable"
                :data="reportTargeList"
                style="width: 100%"
              border
                :height="540"
                @select="handleSelect">
                <el-table-column
                  type="selection"
              align="center"
                  width="55">
                </el-table-column>
                <el-table-column
                  label="指标名称"
              header-align="center"
                  prop="ctName"
                  width="470">
                </el-table-column>
              </el-table>
              <pagination
                v-show="total>0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
              />
            </div>
          </div>
        </el-col>
        <el-col :span="16" class="dialog-col">
          <div class="dialog-col-div">
            <div class="dialog-col-sub-div">
              <divHeader :setText="'已选指标'" class="block-header"></divHeader>
              <el-table
                :data="targetArr"
                style="width: 100%"
                border
                :height="650">
                <el-table-column
              header-align="center"
                  label="指标名"
                  prop="ctName">
                </el-table-column>
                <el-table-column
              header-align="center"
              align="center"
                  label="大类">
                  <template slot-scope="scope">
                   <el-input
                      v-model="scope.row.ctTypeOne"
                      style="width:90%;margin:5px 0"
                      placeholder="请输入大类"
                    />
                    </template>
                </el-table-column>
                <el-table-column
              header-align="center"
              align="center"
                  label="小类">
                  <template slot-scope="scope">
                   <el-input
                      v-model="scope.row.ctTypeTwo"
                      style="width:90%;margin:5px 0"
                      placeholder="请输入大类"
                    />
                    </template>
                </el-table-column>
                <el-table-column
              align="center"
                width="80"
              header-align="center"
                  label="是否统计">
                  <template slot-scope="scope">
                     <el-checkbox v-model="scope.row.ctIfStatistics"></el-checkbox>
                 </template>
                </el-table-column>
                <el-table-column
                width="80"
              align="center"
              header-align="center"
                  label="是否必填">
                  <template slot-scope="scope">
                     <el-checkbox v-model="scope.row.ctIfMust"></el-checkbox>
                 </template>
                </el-table-column>
                <el-table-column
                width="80"
              align="center"
              header-align="center"
                  label="操作">
                  <template slot-scope="scope">
                     <i class="el-icon-delete"
                    style="marginRight:20px;color:#E6A23C;"
                    @click="()=>{handleDel(scope.row)}" ></i>
                  </template>
                </el-table-column>
              </el-table>
              <div class="tree-ul-container">
             
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <div slot="footer">
        <el-button type="primary" @click="selectTemplate">选择指标模板</el-button>
        <el-button type="primary" @click="saveTemplate">保存指标模板</el-button>
        <el-button type="default" @click="clearAndClose">置空</el-button>
        <el-button type="default" @click="cancel">关闭</el-button>
        <el-button type="primary" @click="submit">确认</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="openTemplate"
      v-if="openTemplate"
      class="mis-meeting-transfer-dialog"
      title="模板选择"
      :width="'60%'"
      @close="cancelTemp()"
      append-to-body
    >
    <el-row :gutter="20">
      <el-col :span="14">
          <el-table
            :data="templateList"
            style="width: 100%;cursor:pointer"
            @current-change="handleCurrentChange"
            :height="400"
            border
            @row-click="tempRowClick">
            <el-table-column label width="45">
              <template slot-scope="scope">
                  <el-radio :label="scope.row.ctId" v-model="tempId"><span></span></el-radio>
              </template>
          </el-table-column>
            <el-table-column
              type="index"
              label="序号"
              align="center"
              width="55">
            </el-table-column>
            <el-table-column
              label="模板名称"
              header-align="center"
              align="left"
              prop="ctName">
            </el-table-column>
          </el-table>
      </el-col>
      <el-col :span="10">
        <el-table
            :data="baseDataList"
            tooltip-effect="dark"
            border
            style="width: 100%"
            :height="400">
            <el-table-column
              label="指标名称"
              header-align="center"
              prop="ctName">
            </el-table-column>
          </el-table>
      </el-col>
    </el-row>
    <div slot="footer">
        <el-button type="default" @click="cancelTemp">关闭</el-button>
        <el-button type="primary" @click="selectTemp">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import request from '@/utils/request'
import divHeader from './divHeader'
import store from '@/store/index'
import { getFunNo } from '@/utils/party'
import { listReportTargetBase } from '@/api/spsReport/reportTargetBase'
import {
  listReportTemplateBase,
  addReportTemplateBase,
  updateReportTemplateBase,getReportTemplateBase
} from '@/api/spsReport/reportTemplateBase'

import {
  addTaskissuedTarget
}from '@/api/spsReport/taskissuedTarget'
import { misRenderContent } from '@/utils'
import MisSelectTree from '@/components/SpsPublic/treeview/MisSelectTree'

export default {
  name: 'MisIndexTemplate',
  components: {
    divHeader,
    MisSelectTree
  },
  props: {
    // dialog窗体的title
    dialogTitle: {
      type: String,
      default: '选择指标'
    },
    inputReadonly: {
      type: Boolean,
      default: true
    },
    //是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    targetArr: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      LS: {
        width: '90%',
      },
      openTemplate: false,
      openMeetingTransfer: false,
      // 遮罩层
      loading: [],
      total: 0,
      reportTargeList: [],
      templateList: [],
      tempId:'',
      baseDataList:[],
      queryParams: {
        pageNum: 1,
        pageSize: 20

      }
    }
  },
  computed: {},

  created() {
  },

  mounted() {
  },
  methods: {
    checkTypeOne(item){
        if(!item.ctTypeOne){
            item.ctTypeTwo = ""
            this.$message({
                  type: 'info',
                  message: '请先输入大类 '
                });
        }
    },
    getList() {
      this.loading = true
      listReportTargetBase(this.queryParams).then(response => {
        this.reportTargeList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    handleSelect(selection, row) {
      let arr = this.targetArr.filter((item)=>item.ctCode==row.ctCode)
        if(arr && arr.length==0){
              this.targetArr.push({
                ctId: row.ctId,
                ctName: row.ctName,
                ctCode: row.ctCode,
                ctTypeOne: '',
                ctTypeTwo: '',
                ctIfStatistics: 0
              })
        }
    },
    tempRowClick(row, column, event){
      getReportTemplateBase(row.ctId).then(response => {
        if(response.data){
          this.baseDataList = response.data.reportTemplateBaseDataList
        }
      })

    },
    handleCurrentChange(currentRow, oldCurrentRow) {
        this.tempId=currentRow.id;
    },
    selectTemp(){
      //this.handleSelectionChange(this.baseDataList)
      this.targetArr = [...this.baseDataList]
      this.openTemplate = false
    },
    handleClick() {
      this.openMeetingTransfer = true
      this.reportTargeList = []
      this.getList()
    },
    selectTemplate() {
      this.openTemplate = true
      listReportTemplateBase().then(response => {
        this.templateList = response.rows
      })
    },
    saveTemplate() {
      if(this.tempId){
          addReportTemplateBase({ reportTemplateBaseDataList: this.targetArr, ctType: '01',ctId:this.tempId}).then(response => {
              this.$message({
                  type: 'success',
                  message: '保存成功 '
                });
            })
      }else{
        this.$prompt('请输入模板名称', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputValidator:(value)=>{
              if(value==null || value=="" || value==undefined){
                return false
              }else{
                return true
              }
            },
            inputErrorMessage: '模板名称不能为空'
          }).then(({ value }) => {
            //ctFunNo =1020 为了区分 模板库创建模板 和 任务上报创建模板（任务上报创建模板 ctFunNo=1020）
            addReportTemplateBase({ reportTemplateBaseDataList: this.targetArr, ctType: '01',ctName:value, ctFunNo:'1020'}).then(response => {
              this.$message({
                  type: 'success',
                  message: '保存成功 '
                });
            })
          }).catch(() => {
          });
      }

    },

    submit(){
      console.log(this.targetArr)
      this.$emit('updateIndexTemplateVal', this.targetArr)
      this.openMeetingTransfer = false
    },
    handleDel(item) {
      let index = this.targetArr.findIndex((i) => {
        return i.ctId == item.ctId
      })
      this.targetArr.splice(index, 1)
      this.$emit('updateIndexTemplateVal', this.targetArr)
    },

    cancel() {
      this.openMeetingTransfer = false
    },
    cancelTemp() {
      this.openTemplate = false
    },
    handleChecked(e,row) {
      if(e){
          row.ctIfStatistics = '1'
      }else{
          row.ctIfStatistics = '0'
      }
    },
    handleCtIfMust(e,row) {
      if(e){
          row.ctIfMust = '1'
      }else{
          row.ctIfMust = '0'
      }
    },
    clearAndClose() {
      this.targetArr = []
      this.$emit('updateIndexTemplateVal', this.targetArr)
      this.openMeetingTransfer = false
    }
  }
}
</script>
<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 12px;
}

::v-deep .el-table__header-wrapper .el-checkbox {
  display: none;
}

.mis-input {
  width: calc(100% - 60px);
  float: left;
}

.mis-button {
  float: right;
}
.row-header{
    padding: 0px 15px;
    font-size: 14px;
    font-weight: bold;
    color: #606266;
}
.mis-meeting-transfer {
  .des-label {
    width: 100px;
    color: red;
  }

  .des-tag {
    margin-left: 4px;
    margin-bottom: 4px;
  }

  .mis-row {
    width: calc(100% - 60px);
    float: left;
  }

  .mis-button {
    width: 60px;
    float: right;
  }

  .tree-ul {
    padding-inline-start: 5px;

    .tree-li {
      cursor: pointer;
    }
  }
}

.mis-meeting-transfer-dialog {
  .height100 {
    height: 100%;
  }

  .height33 {
    height: 33%;
  }

  .ul-height1 {
    height: calc(100vh - 315px);
  }

  .el-dialog {
    .el-dialog__body {
      .dialog-col {
        height: calc(100vh - 270px);
        display: table;

        .dialog-col-button-block {
          text-align: center;
          display: table-cell;
          vertical-align: middle;
        }

        .dialog-col-div {
          display: table;
          width: 100%;

          .head-container {
            height: 35px;
          }

          .tree-ul-container {
            height: calc(100% - 35px);
            overflow: hidden;
          }

          // border: 1px solid red;
          background-color: #ffffff;
          border: 1px solid #f5f5f5;
          border-radius: 5px;
          height: calc(100vh - 270px);
          overflow: auto;

          .dialog-tree {
            height: calc(100vh - 320px);
            overflow: auto;
          }
        }

        .dialog-sub-row-button-block {
          text-align: center;
          display: table-cell;
          vertical-align: middle;
        }

        .dialog-sub-row {
          height: 100%;

          .dialog-sub-col {
            height: 33%;
            display: table;

            .dialog-sub-row-button-block {
              text-align: center;
              display: table-cell;
              vertical-align: middle;
            }

            .dialog-col-sub-div {
              .head-container {
                height: 35px;
              }

              .tree-ul-container {
                height: calc(100% - 35px);
                overflow: auto;
              }

              background-color: #ffffff;
              border: 1px solid #f5f5f5;
              border-radius: 5px;
              height: 100%;
              overflow: auto;

              .dialog-tree {
                height: calc(100vh - 320px);
                overflow: auto;
              }
            }
          }
        }
      }
    }
  }
}
</style>

